<template>
	<view class="color-333 ">
		<view class="flex px20 mt30" :class="screenList.length==1?'row-between':'row-around'">
			<view class="flex" v-if="item" :class="{'color-zs':screenShow==key}" v-for="(item,key) in screenList" :key="key"
				@click="screenShow=screenShow==key?'':key">
				<view class="mr2">{{item.text[value[key]]||item.name}}</view>
				<view style="transition: 0.5s;" :style="[{transform:screenShow==key?'rotate(180deg)':'rotate(0deg)'}]">
					<u-icon name="arrow-down-fill" size="24" />
				</view>
			</view>
		</view>
		<view class="relative ">
			<view class="screen-pop w-max px20 pt20 z-index99 border-b" :class="{'pa':pa}" v-if="screenShow">
				<block v-if="screenShow=='age'">
					<view class="w-max flex-col col-center p30 fw-w color-333">
						<view class="fw-w color-999">年龄范围最小值</view>
						<view class="mt40 ">{{age_min}}岁</view>
						<view class="w-max mt30">
							<u-slider v-model="age_min" :min="18" :max="age_max" height="24" block-width="44"
								block-color="#3EACFF" inactive-color="#f3f3f3" active-color="#f3f3f3"></u-slider>
						</view>
						<view class="w-max flex row-between mt22">
							<view class="">0</view>
							<view class="">100</view>
						</view>
						<view class="fw-w color-999">年龄范围最大值</view>
						<view class="mt40 ">{{age_max}}岁</view>
						<view class="w-max mt30">
							<u-slider v-model="age_max" :min="age_min" :max="60" height="24" block-width="44"
								block-color="#3EACFF" inactive-color="#f3f3f3" active-color="#f3f3f3"></u-slider>
						</view>
						<view class="w-max flex row-between mt22">
							<view class="">0</view>
							<view class="">100</view>
						</view>
						<view class="mt40 flex row-between w-max">
							<view class="w280">
								<u-button shape="circle" @click="age_max=60,age_min=18">重置</u-button>
							</view>
							<view class="w280">
								<u-button shape="circle" type="warning" @click="inpuAge">确认</u-button>
							</view>
						</view>
					</view>
				</block>
				<scroll-view v-else scroll-y class="h-max" style="overflow: auto;max-height: 450rpx;">
					<block>
						<view v-for="(item,key) in screenList[screenShow].text" :key="key" class="py24 flex row-between"
							@click="input(screenShow,key)">
							<view class="fs30 color-666" :class="{'color-zs':value[screenShow] == key}">{{item}}</view>
							<image src="/static/img/index/select.png" class="h22 w24 db"
								v-if="value[screenShow] == key" />
						</view>
					</block>
				</scroll-view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "screenList",
		props: {
			value: {
				default: () => {
					return {
						// types: '', //医院类型
						// service_id: '', //项目id
						// price: '', //价格 '',asc=由低到高,desc=由高到低
						// distance: '', //距离 '':asc=由近到远,desc=由远到近
						// sale: '', //销量 '',,asc=由低到高,desc=由高到低
						// age_min: 18,
						// age_max: 60,
						// sex:'',
						// good_rate:'',//好评率：100=100%，90=90%-99%，80=80%-89%，79=80%以下
						// is_report: '', //	整型	必填	-	-	体检情况：0未上传，1已上传
					}
				}
			},
			pa: {
				default: false
			},
			level: {
				default: ''
			},
			types: {
				default: ''
			},
			serviceList: {
				default: ''
			},
			type: {
				default: ''
			},
		},
		computed: {
			screenList() {
				let types = {}
				let obj = {
					'distance': {
						name: '综合距离',
						show: ['yy'],
						text: {
							'': '距离',
							'asc': '由近到远',
							'desc': '由远到近',
						},
					},
					'types': {
						name: '类型',
						show: ['yy', '', 'pzjg'],
						text: this.types,
					},
					'level': {
						name: '级别',
						show: ['yy', '', 'pzjg'],
						text: this.level,
					},
					'good_rate': {
						name: '好评率',
						show: ['', 'pzs', 'pzjg'],
						text: {
							"0": '好评率',
							"100": '好评100%',
							"90": '好评90%-99%',
							"80": '好评80%-89%',
							"79": '好评80%以下',
						},
					},
					'sex': {
						name: '性别',
						show: ['', 'pzs', 'pzjg'],
						text: {
							'0': '性别',
							'1': '男',
							'2': '女',
						},
					},
					'age': {
						name: '年龄',
						show: ['', 'pzs', 'pzjg'],
						text: '',
					},
				}
				let obj2 = {}
				for (let key in obj) {
					if (obj[key]?.show?.includes(this.type)) obj2[key] = obj[key]
				}
				return obj2
			},
		},
		data() {
			return {
				screenShow: '', //筛选框显隐

				age_min: 18,
				age_max: 60,
			};
		},
		watch: {
			type() {
				this.screenShow = ''
			}
		},
		methods: {
			input(fidle, value) {
				let params = {
					...this.value
				}
				params[fidle] = value
				this.submit(params)
			},
			inpuAge() {
				let params = {
					...this.value
				}
				params.age_min = this.age_min
				params.age_max = this.age_max
				this.submit(params)
			},
			submit(params) {
				this.$emit('input', params)
				this.screenShow = ''
			},
		},
	}
</script>

<style lang="scss">
	.screen-pop {
		border-radius: 0 0 20rpx 20rpx;
		background: #fff linear-gradient(0deg, rgba(9, 199, 202, 0.1) 0, rgba(255, 255, 255, 0) 50rpx);
	}
</style>
